.bg-fundo-monta-frase {
   background: #8692FF;
   width: 100%;
}

#linha-montar-frase {

   width: 250px;
}

.linha-montar-frase {
   width: 250px;
}

.jogo-tela-cheia-monta-frase {
   width: 90%;
   max-width: 560px;
   flex-direction: column;
   align-content: center;
   display: flex;
}

.texto-legenda {
   font-size: 17px;
   bottom: -26px;
   position: relative;
   text-align: center;
   white-space: nowrap;
   -webkit-text-stroke-width: 0.2px;
   text-shadow: 1px 1px 1px rgb(212, 212, 212);
   color: #000000;
   -webkit-text-stroke-color: white;

}

.centraliza-linha {

   display: flex;
   flex-direction: column;
   align-items: center;
}

.grid-monta-frase-01 {
   display: grid;
   position: relative;
   grid-template-columns: repeat(3, minmax(auto, 1fr));
   gap: 16px;
   height: 100%;
   margin: 5% 8%;
   justify-content: space-between;

}

.grid-monta-frase-02 {
   display: grid;
   position: relative;
   grid-template-columns: repeat(3, minmax(auto, 1fr));
   gap: 16px;
   height: 100%;
   margin: 5% 8%;
   justify-content: space-between;

}

.grid-monta-frase-03 {
   display: grid;
   position: relative;
   grid-template-columns: repeat(3, minmax(auto, 1fr));
   gap: 16px;
   height: 100%;
   margin: 5% 8%;
   justify-content: space-between;

}

.grid-monta-frase-04 {
   display: grid;
   position: relative;
   grid-template-columns: repeat(3, minmax(auto, 1fr));
   gap: 16px;
   height: 100%;
   margin: 5% 8%;
   justify-content: space-between;

}

.grid-monta-frase-05 {
   display: grid;
   position: relative;
   grid-template-columns: repeat(3, minmax(auto, 1fr));
   gap: 16px;
   height: 100%;
   margin: 5% 8%;
   justify-content: space-between;

}

.tamanho-carta {
   margin-bottom: 28px;
   aspect-ratio: 1/1;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: row;
   flex-wrap: nowrap;

}

.card {
   aspect-ratio: 1/1;
   width: 25%;
   border-radius: 22px;
   box-shadow: 0px 3px 14px #00000017;
   position: relative;
   transition: all 400ms ease;
   transform-style: preserve-3d;

}

.face {
   display: flex;
   width: 31%;
   margin-bottom: 28px;
   position: absolute;
   justify-content: center;
   align-items: flex-end;
}

.face:hover {
   transform: scale(1.07);

}

.verso-carta {

   background-image: url("../images/jogo_da_memoria/abacaxi.jpg");
   background-size: cover;
   background-position: center;
   backface-visibility: hidden;
   background-position: center;
   background-size: cover;
   background-size: 105%;
}


.texto-monta-frase {
   z-index: 2;
   /* position: absolute; */
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-content: center;
   text-align: center;
   margin-top: 16px;
   margin-bottom: 28px;
   font-size: 42px;
   line-height: 24px;
   color: #0075FE;
   /* text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.205);
   -webkit-text-stroke-width: 2.4px;
   -webkit-text-stroke-color: white; */
   transform: rotate(-2deg);

}

.texto-monta-frase-borda {
   position: absolute;
   z-index: 1;
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-content: center;
   text-align: center;
   margin-top: 16px;
   margin-bottom: 28px;
   font-size: 42px;
   line-height: 24px;
   color: #0075FE;
   text-shadow: 1px 6px 9px rgb(0 0 0 / 73%);
   -webkit-text-stroke-width: 8px;
   -webkit-text-stroke-color: white;
   transform: rotate(-2deg);

}

.titulo-relative {
   display: flex;
   position: relative;
   flex-direction: column;
   align-items: center;
}










/* Animação de  Bounce no click */
.bounce-in-fwd {
   -webkit-animation: bounce-in-fwd 0.5s ease-in-out both;
   animation: bounce-in-fwd 0.5s ease-in-out both;
}

@-webkit-keyframes bounce-in-fwd {
   0% {
      -webkit-transform: scale(0);
      transform: scale(0);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      opacity: 0;
   }

   38% {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
      opacity: 1;
   }

   55% {
      -webkit-transform: scale(0.7);
      transform: scale(0.7);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
   }

   72% {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
   }

   81% {
      -webkit-transform: scale(0.84);
      transform: scale(0.84);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
   }

   89% {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
   }

   95% {
      -webkit-transform: scale(0.95);
      transform: scale(0.95);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
   }

   100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
   }
}

@keyframes bounce-in-fwd {
   0% {
      -webkit-transform: scale(0.2);
      transform: scale(0.2);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      opacity: 0;
   }

   38% {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
      opacity: 1;
   }

   55% {
      -webkit-transform: scale(0.7);
      transform: scale(0.7);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
   }

   72% {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
   }

   81% {
      -webkit-transform: scale(0.84);
      transform: scale(0.84);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
   }

   89% {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
   }

   95% {
      -webkit-transform: scale(0.95);
      transform: scale(0.95);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
   }

   100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
   }
}


.linha-1-anima {
   width: 250px;
   margin-bottom: 15px;
   /* background-color: blueviolet; */
   height: 38px;
}